<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        
        body,
        html,
        .container {
            height: 100vh;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden;
            /* 开启flex布局 */
            display: flex;
            /* 将子元素布局方向修改为垂直排列 */
            flex-flow: column;
        }
        
        .content {
            background-color: #52c41a;
            /* * 中间部门的布局可以参考 两列 三列 布局 */
            display: grid;
            grid-template-columns: auto 1fr;

            /* 如果超出出现滚动条 */
            overflow: auto;
            /* 设置 中间 部分自适应 */
            flex: 1;
        }
        
        .left {
            width: 240px;
            background-color: #52c41a;
            font-size: 80px;
            line-height: calc(100vh - 200px);
        }
        
        .right {
            background-color: #f759ab;
            font-size: 60px;
        }
        
        .header {
            height: 100px;
            background-color: #70a1ff;
        }
        
        .footer {
            height: 100px;
            background-color: #ff7a45;
        }
        
        .header,
        .footer {
            line-height: 100px;
            font-size: 52px;
        }
        
        .right-in {
            
            height: 500px;
        }
    </style>
</head>

<body>
    <!-- 全部布局主要应用在后台 -->
    <div class="container">
        <div class="header">header</div>
        <div class="content">
            <div class="left">导航</div>
            <div class="right">
                <div class="right-in">自适应，超出高度出现滚动条</div>
            </div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

</html>